<template>
	<view class="">
		<uni-nav-bar id="nav" :title="navTitle" :statusBar="true" :fixed="true">
			<view slot="left" @click="backAction()">
				<uni-icons type="back" size="25"></uni-icons>
			</view>
		</uni-nav-bar>
		<view>
			<cover-view :style="{top:navBarHeight+'px'}" class="video-control">
				<cover-view class="loading-box" v-if="!isLoading&&url&&viewerNum>0">
					<cover-view v-if="envVersion!='release'" class="loading">设备连接个数{{viewerNum}}</cover-view>
				</cover-view>
				<!-- 加载提示信息 -->
				<cover-view class="loading-box" v-if="isLoading">
					<!-- <cover-view class="loading">{{ loadingText }}</cover-view> -->
				</cover-view>
			</cover-view>
			<!-- && TailoredInfo.bs != 3 -->
			<view class="cell-box" :style="{top:navBarHeight+'px'}">
				<view class="cell cell—up" v-if="bl">
					<view v-if="bal" :style="{color:colorbg(bl)}" class="cell-text">电池上</view>
					<j-electric :ElectricQuantity="bl > 0 ? bl : 0" isElectric></j-electric>
				</view>
				<view class="cell cell—down" v-if="bal">
					<view :style="{color:colorbg(bal)}" class="cell-text">电池下</view>
					<j-electric :ElectricQuantity="bal > 0 ? bal : 0" isElectric></j-electric>
				</view>
			</view>
			<view v-if="wifiUrl" class="wifi-box" :style="{top:navBarHeight+'px'}">
				<image style="width: 40rpx;height: 40rpx;" :src="wifiUrl" mode="">
				</image>
			</view>
			<cover-view class="u-f-ajc u-f-c sheet" v-if="isShowHD">
				<cover-view class="u-f-ajc item" v-for="(item,index) in hdList" :key="index" @click="selectHd(item)">
					{{item.label}}
				</cover-view>
			</cover-view>
			<cover-view class="u-f-r bottom-control">
				<cover-view class="u-f-ajc  item">
					<cover-image :src="unlockIcon" class="img1" @click="unlockClick"></cover-image>
					<cover-image :src="talkIcon" class="img2" @longpress="startPush" @touchend="stopPush"></cover-image>
					<cover-image :src="temporaryIcon" class="img1" @click="toTemporary"></cover-image>
				</cover-view>
			</cover-view>
			<cover-view class="u-f-c right-control">
				<cover-view class="u-f-ajc  item" v-for="(item,index) in rightList" :key="index"
					@click="clickFunc(item)">
					<cover-image :src="item.icon" class="img"></cover-image>
				</cover-view>
			</cover-view>
			<!-- 对讲按钮 -->
			<cover-view
				style="width: 10rpx;height: 10rpx;position: absolute;bottom: 120rpx;left:50%;background: transparent;transform: translateX(-50%);">
				<live-pusher v-if="isShowPush" id="pushLive" class="live" style="width: 1rpx;height: 1rpx;background: blue;"
					:url="talkUrl" mode="live" :autopush="isPush" :enable-camera="false" :enable-agc="true"
					:enable-mic="true" :enable-ans="true" @statechange="statechange2" @netstatus="netstatusChange"
					@error="error2" audio-volume-type="voicecall" :max-bitrate="600" audio-quality="low">
				</live-pusher>
			</cover-view>

			<!-- 截图显示后的图片 -->
			<cover-view v-if="isCapture" class="capture u-f-ajc" :style="{bottom:captureBottom+'px'}"  @click="shareCapture">
				<cover-image :src="captureUrl"  class="img"></cover-image>
				<cover-view class="u-f-ajc descV">哇！拍到一张美照，点击分享</cover-view>
			</cover-view>
			<live-player v-if="isShowPush" id="livePlayer" :src="url" :min-cache="cacheMinTime" :max-cache="cacheMaxTime" autoplay mode="live"
				@statechange="statechange" :muted="isMute" :auto-pause-if-navigate="false" :auto-pause-if-open-native="false"  @error="error" style="width: 100%;"
				:style="{height:clientHeight+'px'}" @audiovolumenotify="bindaudiovolumenotify"/>
			<!-- 登录 -->
			<j-device-login ref="deviceLogin" :device="device" @submit="submit"></j-device-login>
			<uni-popup ref="popup" :isMaskClick="false" type="bottom">
				<view>
					<j-cell-group>
						<view class="popup-content">
							<view class="u-f-r" style="background:#FFFFFF;padding:20rpx;">
								<view class="u-f-c item" v-for="(item,index) in popupList" :key="index"
									@click="toDetail(item)">
									<cover-image :src="item.icon" class="img"></cover-image>
									<text class="desc">{{item.title}}</text>
								</view>
							</view>
						</view>
					</j-cell-group>
					<view style="padding:0 20rpx 20rpx">
						<button type="default" plain
							style="width: 100%;color: #FF0025 !important;border-color: #dcdcdc !important;background-color: #FFFFFF !important;"
							@click="closePopup">取消</button>
					</view>
				</view>
			</uni-popup>
			<!-- <j-modal title="请输入正确数字密码解锁智能门锁" v-model="show" okText="开锁" @ok="ok" @cancel="cancel" @mask="cancel">
			<uni-easyinput type="text" v-model="password" placeholder="请输入开锁密码"></uni-easyinput>
		</j-modal> -->
			<!-- 开锁弹框 -->
			<uni-popup ref="inputDialog" type="dialog" class="popupName">
				<view class="form">
					<view class="u-f-ajc title">是否打开门锁？</view>
					<!-- <view class="u-f-ajc title">请输入正确数字密码解锁智能门锁</view> -->
					<!-- <view class="form-item">
					<input :focus="focus" type="password" placeholder="请输入开锁密码" name="password" v-model="password"/>
				</view>
				<view class="desc">该密码用于远程开锁，通过手机远程，即可打开家门</view> -->
					<view class="u-f-r form-item">
						<view class="u-f-ajc cancel" @click="cancel">取消</view>
						<view class="u-f-ajc conf" @click="confimeUnlock">确认</view>
					</view>
				</view>
			</uni-popup>
			<!-- <j-modal :value="noDataStatus" :showCancel="false" title="提示" @ok="closeSleepStatusPopup('noData')">
				<view slot="content">
					获取视频数据超时,可点击画面上的播放按钮进行重试
				</view>
			</j-modal> -->
		</view>
	</view>
</template>

<script>
	import rCanvas from "../../../components/r-canvas/r-canvas.vue"
	import {
	  liveMixins
	} from './mixins/live.js'
	export default {
		mixins: [liveMixins],
		components: {
			rCanvas
		},
		onShow() {
			let deviceList = uni.getStorageSync('deviceList');
		    for (let i = 0; i < deviceList.length; i++) {
			    const item = deviceList[i];
			    if (item.deviceNo === this.device.deviceNo) {
				    // this.navTitle = item.deviceName;
				    break;
			    }
		    }
		},
		onReady() {
			this.initCanvas()
		},
		methods:{
			initCanvas(){
				this.$nextTick(async () => {
					console.log("this.$refs.rCanvas ===",this.$refs.rCanvas);
					// 初始化
					await this.$refs.rCanvas.init({
						canvas_id: "rCanvas",
						scale:1,
						// canvas_width:652,
						// canvas_height:1159.1,
						canvas_width: this.scanvsWidth,//260,//366.75,
						canvas_height: this.scanvsHeight,//462,//652,
						hidden:true
					})
				})
			},
		}
	}
	
		
</script>
<style lang="scss">

    .popupName {
        /deep/ .uni-popup__wrapper {
            top: -100rpx;
        }
    }
	page {
		overflow: hidden;
	}

	.cell-box {
		position: absolute;
		z-index: 999;
		// top: 10rpx;
		left: 10rpx;
		display: flex;
		flex-direction: column;

		.cell {
			color: #FF0025;
			display: flex;
			align-items: center;
			height: 45rpx;
			font-size: 20rpx;

			// line-height: 50rpx;
			.cell-text {
				margin: 0 10rpx;
			}
		}
	}

	.wifi-box {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 999;
	}

	.video-control {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.loading-box {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hd {
		position: absolute;
		right: 50rpx;
		top: 20rpx;
		z-index: 110;
		color: #ffffff;
		font-size: 26rpx;
		width: 140rpx;
		height: 50rpx;
		background: rgba(0, 0, 0, 0.39);
		border-radius: 25rpx;
	}

	.sheet {
		z-index: 99;
		position: absolute;
		width: 150rpx;
		top: 90rpx;
		right: 40rpx;
		background: white;
		padding: 0rpx 30rpx 30rpx;
		border-radius: 16rpx;

		.item {
			margin-top: 30rpx;
		}
	}

	.bottom-control {
		z-index: 999;
		position: absolute;
		height: 230rpx;
		bottom: 120rpx;
		right: 30rpx;
		left: 30rpx;

		.item {
			flex: 1;
			justify-content: space-around;

			.img {
				width: 96rpx;
				height: 96rpx;
				margin: 0 40rpx;
			}

			.img2 {
				width: 210rpx;
				height: 210rpx;
			}

			.img1 {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}

	}

	.right-control {
		z-index: 99;
		position: absolute;
		height: 400rpx;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);

		.item {
			flex: 1;

			.img {
				width: 70rpx;
				height: 70rpx;
			}

		}
	}

	/deep/.uni-popup {
		z-index: 115;
	}

	.form {
		background: white;
		padding: 60rpx;
		border-radius: 10rpx;

		.title {
			font-size: 34rpx;
			font-weight: bold;
			line-height: 49rpx;
			color: #464646;
		}

		.desc {
			font-size: 22rpx;
			color: #8A8A8A;
			line-height: 84rpx;
		}

		.form-item {
			margin-top: 40rpx;

			input {
				border: 1rpx solid #A5A5A5;
				border-radius: 8rpx;
				padding: 10rpx;
			}

			.cancel {
				background: #F6F7FB;
				color: #000000;
				font-size: 30rpx;
				width: 237rpx;
				height: 84rpx;
				border-radius: 42rpx;
			}

			.conf {
				margin-left: 20rpx;
				background: #FF0025;
				color: #ffffff;
				font-size: 30rpx;
				width: 237rpx;
				height: 84rpx;
				border-radius: 42rpx;
			}
		}
	}

	.loading {
		width: 100%;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		color: #ffffff;
		font-size: 24rpx;
	}

	.topbar {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 100;
		color: #ffffff;
		/* background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0)); */
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;

		.icon {
			transform: rotate(90deg);
			width: 36rpx;
			height: 36rpx;
		}
	}

	// .bottombar {
	// 	width: 100%;
	// 	position: absolute;
	// 	left: 0;
	// 	bottom: 7rpx;
	// 	z-index: 100;
	// 	color: #FFFFFF;
	// 	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	// 	background: rgba(0, 0, 0, 0.5);
	// 	display: flex;
	// 	justify-content: flex-end;
	// 	align-items: center;
	// }

	.icon {
		width: 72rpx;
		height: 72rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img {
		display: block;
		width: 36rpx;
		height: 36rpx;
	}
	.capture {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 999;
		height: 250rpx;
		// transform: translateX(-50%);
		.img{
			width: 260rpx;
			height: 200rpx;
			border: 2px solid white;
			border-radius: 5rpx;
		}
		.descV{
			background:rgba(0, 0, 0, 0.5);
			color: white;
			font-size: 24rpx;
			width: 100%;
			text-align: center;
			height: 50rpx;
		}
	}
	.jf-button {
		background: transparent;
		width: auto;
		margin: 0;
		line-height: 1.25;
	}

	.jf-button::after {
		border: none;
	}

	.video-control-extra {
		height: 10vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
	}

	.control-inner {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 35vw;
		height: 35vw;
		border-radius: 100%;
		border: 1px solid #cccccc;
	}

	.control-handle {
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
	}

	.control-top {
		top: 0;
	}

	.control-top-right {
		top: 30rpx;
		right: 30rpx;
		transform: rotate(45deg);
	}

	.control-right {
		right: 0;
		transform: rotate(90deg);
	}

	.control-right-bottom {
		right: 30rpx;
		bottom: 30rpx;
		transform: rotate(135deg);
	}

	.control-bottom {
		bottom: 0;
		transform: rotate(180deg);
	}

	.control-bottom-left {
		bottom: 30rpx;
		left: 30rpx;
		transform: rotate(225deg);
	}

	.control-left {
		left: 0;
		transform: rotate(270deg);
	}

	.control-left-top {
		left: 30rpx;
		top: 30rpx;
		transform: rotate(315deg);
	}

	.control-center {
		width: 12vw;
		height: 12vw;
		border-radius: 100%;
		background: #FF0025;
	}

	.box {
		width: 100rpx;
		height: 100rpx;
		border: 1px solid #999999;
		border-radius: 12rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.box.active {
		border: 1px solid #FF0025;
		color: #FF0025;
	}

	.cruise-empty {
		width: 100vw;
		height: 50vh;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		text-align: center;
		font-size: 24rpx;
		background: #FFFFFF;
	}

	.popup-content {
		.item {
			padding: 40rpx 0;
			flex: 1;
			justify-content: center;
			display: flex;
			align-items: center;

			.desc {
				color: #666666;
				font-size: 30rpx;
				margin-top: 10rpx;
			}

			.img {
				width: 120rpx;
				height: 120rpx;
			}

		}

		.confirm {
			font-size: 30rpx;
			color: #2CBDB8;
			height: 98rpx;
		}

		.btn {
			width: 100%;
			color: #FF0025 !important;
			border-color: #dcdcdc !important;
			background-color: #FFFFFF !important;
		}
	}
</style>
